<template>
  <div class="main">
    <!-- left_box -->
    <div class="main_left">
      <div class="title">
        <h3>{{detail.title}}</h3>
        <div style="color:gray;">{{detail.publisherName}}&nbsp;&nbsp;{{detail.createTime}}</div>
      </div>

      <div class="content">
        <!-- 图片部分 -->
        <div class="imgs">
          <div class="img"
               v-for="(item,index) in images"
               :key="index">
            <img :src="item" />
          </div>
        </div>
        <!-- 文字部分 -->
        <div class="text">
          <div v-text="detail.content"></div>
        </div>
        <!-- 评论部分 -->
        <div class="comment_box">
          <div style="font-weight:bolder;color:#7da3c2;padding-bottom:5px;">|相关评论</div>
          <!-- 评论发送部分 -->
          <div class="send_box">
            <div>
              <el-input type="textarea"
                        :rows="5"
                        placeholder="在此输入您的评论"
                        v-model="comment">
              </el-input>
            </div>

            <div style="display:flex;align-items:center;justify-content: space-between;">
              <div></div>
              <div style="margin:5px;">
                <el-button type="primary">发送</el-button>
              </div>
            </div>

          </div>
          <!-- 评论列表 -->
          <div class="comment_list">
            <!-- 评论内容 -->
            <div class="comment">
              <div class="item"
                   v-for="(item,index) in comments"
                   :key="index">
                <!-- 用户信息 -->
                <div class="userInfo">
                  <div class="avatar"><img :src="item.avatar" /></div>
                  <div class="nickname">{{item.nickname}}</div>
                </div>
                <!-- 评论内容 -->
                <div class="content">
                  <div>{{item.content}}</div>
                  <div style="color:gray;font-size:5px;">{{item.createTime.substring(0,10)}}</div>
                </div>
              </div>
            </div>
            <!-- 空状态 -->
            <div class="empty"
                 v-if="comments.length===0">
              <el-empty description="暂时没有评论"></el-empty>
            </div>
            <!-- 分页插件 -->
            <div class="page_plugin">
              <!-- <el-pagination
                             @current-change="handleCurrentChange"
                             :current-page="currentPage"
                             :page-size="10"
                             layout="total, sizes, prev, next, "
                             :total="total">
              </el-pagination> -->
            </div>
          </div>
        </div>

      </div>

    </div>
    <!-- right_box -->
    <div class="main_right"></div>
  </div>
</template>

<script>
import { getPostsDetail, getComment4Page } from '@/api/posts'
export default {
  data () {
    return {
      id: this.$route.query.id,
      detail: {},
      comments: [],//当前帖子的评论
      images: [],
      comment: '',//用户的评论内容
      currentPage:1,//评论当前页码
      total:0//评论总数
    }
  },
  methods: {
    getData () {
      getPostsDetail(this.id).then(resp => {
        this.detail = resp
        this.images = this.detail.images.split(",")
      })
      getComment4Page({ id: this.id, page: 1 }).then(resp => {
        this.total=resp.total
        this.comments = resp.list
      })
    },

    //页码切换
    handleCurrentChange(){

    }
  },
  created () {
    this.getData()
  }
}
</script>

<style lang='scss' scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;

  // 左边盒子
  .main_left {
    flex: 3;
    border: 1px solid red;
    box-sizing: border-box;
    margin-right: 20px;
    // 标题部分
    .title {
      border: 1px solid black;
    }
    //内容部分
    .content {
      // 图片部分
      .imgs {
        display: flex;
        align-items: center;
        border: 1px solid orange;
        .img {
          flex: 1;
          img {
            width: 100%;
          }
        }
      }
      // 文字部分
      .text {
      }
      // 评论部分
      .comment_box {
        margin-top: 20px;
        // 评论发送部分
        .send_box {
        }
        // 评论列表部分
        .comment_list {
          // 每个评论样式
          .comment {
            .item {
              border-bottom: 1px solid #e1e1e1;
              // 评论者信息
              .userInfo {
                display: flex;
                align-items: center;
                // 头像
                .avatar {
                  width: 50px;
                  img {
                    width: 100%;
                    border: 1px solid #e1e1e1;
                    border-radius: 50%;
                  }
                }
                // 昵称
                .nickname {
                  color: gray;
                  padding-left: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
  // 右边盒子
  .main_right {
    flex: 1;
    border: 1px solid blue;
  }
}
</style>
